<template>
  <div class="boxshow phone_news" v-if="partListCon">
    <!-- {{ partListCon }} -->
    <modueltitle :info="partListCon"></modueltitle>
    <div class="cityinfo_show">
      <div class="groupbuy_cate">
        <div class="groupbuy_cate_top">
          <div v-for="(cate, i) in cateList" :key="i" :class="active == cate.id ? 'groupbuy_active' : ''">
            <p>{{ cate.title }}</p>
            <p>{{ cate.sub_title }}</p>
            <p></p>
          </div>
        </div>
      </div>
      <div class="groupbuy_body">
        <div class="cityinfoitem">
          <div class="header">
            <div class="left">
              <img :src="$fnc.getImgUrl(info.avatar)" width="45px" height="45px" alt="" />
            </div>
            <div class="center">
              <p class="title">{{ info.title }}</p>
              <span>【{{ info.contacts_name }}】 【{{
                  info.created_time | getTimeFormat
                }}】</span>
            </div>
            <div class="phone" @click="$fnc.tel(info.contacts_phone)">
              <van-icon name="phone-o" />
              <span>电话</span>
            </div>
          </div>
          <div class="msg">
            <ul>
              <li v-for="(item, i) in info.field" :key="i" class="lidetail">
                <span class="item">{{ item.title }}：</span>
                <span class="detail ">{{ item.value }}</span>
              </li>

              <li class="detail">{{ info.remark }}</li>
            </ul>
            <span class="showall">查看全文</span>

            <div class="imgs">
              <div v-for="(item, i) in imglist" :key="i">
                <img :src="$fnc.getImgUrl(item)" alt="" @click="openimg(i)" />
              </div>
            </div>
            <div class="liulan">
              <div class="headers">
                <img v-for="(item, i) in info.visit_data" :key="i" :src="$fnc.getImgUrl(item.avatar)" alt="" width="25px" height="25px" />

                <van-icon name="ellipsis" />
              </div>
              <div></div>
              <div>{{ info.visit_number }}人已阅读</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import modueltitle from "@/components/page/module/module_center/module_title_show";
export default {
  data () {
    return {
      info: {
        id: "10",
        uid: "11",
        cid: "48",
        bid: "1",
        info_number: "15923745590000001",
        iden: "a",
        title: "马尾-福州",
        img:
          '["/api/resource/image/default/202006/97f20f02470873d7d599df1b19c8d13e.jpg","/api/resource/image/default/202006/7449849aa085cc6bcfbe38a745b27d9d.jpg","/api/resource/image/default/202006/abbf6655d6e98a9ef666695f9ca80113.jpg","/api/resource/image/default/202',
        visit_number: "1",
        reply_number: "0",
        contacts_name: "司机小王",
        contacts_phone: "17788881111",
        longitude: "119.33477783203125",
        latitude: "26.057165145874023",
        address: "福建省福州市台江区排尾路",
        top_time: "1592374559",
        created_time: "1592374559",
        update_time: "1592380347",
        field: [
          {
            id: "31",
            title: "文本框标题",
            iden: "title",
            bid: "48",
            remark: "",
            default: "请输入标题",
            is_open: "1",
            is_verification: "1",
            created_time: "1592205227",
            update_time: "1592277085",
            types: "1",
            parameter: "",
            value: "马尾-福州"
          },
          {
            id: "32",
            title: "乘车时间",
            iden: "cartime",
            bid: "48",
            remark: "",
            default: "",
            is_open: "1",
            is_verification: "1",
            created_time: "1592205310",
            update_time: "1592205310",
            types: "5",
            parameter: null,
            value: "1592374440"
          },
          {
            id: "33",
            title: "下拉乘车人数",
            iden: "number",
            bid: "48",
            remark: "",
            default: "请选择乘车人数",
            is_open: "1",
            is_verification: "1",
            created_time: "1592205948",
            update_time: "1592277093",
            types: "4",
            parameter: "1@2@3@4@5",
            value: "1"
          },
          {
            id: "34",
            title: "乘车单选",
            iden: "carsel",
            bid: "48",
            remark: "",
            default: "请选择",
            is_open: "1",
            is_verification: "1",
            created_time: "1592276741",
            update_time: "1592277100",
            types: "2",
            parameter: "A@B@C",
            value: "A"
          },
          {
            id: "35",
            title: "多选",
            iden: "sellmore",
            bid: "48",
            remark: "",
            default: "请多选",
            is_open: "1",
            is_verification: "1",
            created_time: "1592276812",
            update_time: "1592276812",
            types: "3",
            parameter: "AAA@BBB@CCC",
            value: "BBB@AAA"
          },
          {
            id: "37",
            title: "文本域",
            iden: "textarea",
            bid: "48",
            remark: "",
            default: "",
            is_open: "1",
            is_verification: "0",
            created_time: "1592276871",
            update_time: "1592276871",
            types: "7",
            parameter: null,
            value: "12312312312321312312312321"
          }
        ],
        main_id: "10",
        class_title: ["车找人", "顺风车"],
        visit_data: [
          {
            id: "6",
            uid: "1",
            mid: "10",
            avatar:
              "/api/resource/image/default/201912/329e5d0c957ac2e86623d1c33f6b0c14.jpg",
            created_time: "1592380347",
            update_time: "1592380347"
          }
        ]
      },
      cateList: [],
      newslist: []
    };
  },
  components: {
    modueltitle
  },
  props: {
    index: {
      type: Number,
      default: -1
    }
  },

  computed: {
    imglist () {
      try {
        return JSON.parse(this.info.img);
      } catch (error) {
        return [];
      }
    },
    ...mapState({
      active: state => state.modulePage.active,
      bannerNowIndex: state => state.modulePage.bannerNowIndex || 0,
      allbanner: state => state.modulePage.allbanner,
      partListCon () {
        if (this.index >= 0) {
          if (this.allbanner[this.index].text > 0) {
            this.getnewslist(this.allbanner[this.index].text);
          }
          return this.allbanner[this.index];
        } else {
          return {};
        }
      },
      now_status_cate () {
        try {
          return this.partListCon.text;
        } catch (error) {
          return 0;
        }
      }
    })
  },

  created () {
    this.getcate();
  },
  mounted () { },
  methods: {
    getcate () {
      this.$api.getClassify.getClassInfo().then(res => {
        if (res.data.code == 200) {
          this.cateList = res.data.result;
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.boxshow {
  width: 100%;
}
.phone_news {
  width: 100%;
  border: 1px solid transparent;
  background: #fff;
  margin: 10px 0;
}
.phone_news_body {
  width: 94%;
  margin: 0 auto;
  position: relative;
}
.news_list_item {
  width: 100%;
  background-color: white;
  height: 95px;
  margin: 0 auto 10px auto;
  // padding: 5px;

  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.news_list_item_right {
  width: 35%;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
}
.news_list_item_right img {
  width: 100%;
  height: 100%;
}
.news_list_item_left {
  width: 65%;
  height: 80px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding-right: 10px;
}
.news_list_item_left p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000000;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.news_list_item_other {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.news_list_item_other span {
  font-size: 12px;
  color: #a8a8a8;
}
.news_list_item_otherspan:nth-of-type(1) {
  display: flex;
  height: 20px;
}
.groupbuy_cate {
  width: 100%;
  height: 100%;
  background: transparent;
  padding: 15px 0 0 0;
  margin: 0;

  .groupbuy_cate_top {
    width: 100%;

    display: -webkit-box;
    overflow-y: hidden;
    overflow: hidden;
    > div {
      position: relative;
      width: 25%;
      line-height: 1.5;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-align: center;
      > p {
        width: 100%;
      }
      > p:nth-of-type(1) {
        color: #3a4658;
        font-size: 16px;
        font-weight: bold;
      }
      > p:nth-of-type(2) {
        color: #999999;
        font-size: 12px;
        padding-bottom: 10px;
      }
      > p:nth-of-type(3) {
        position: absolute;
        bottom: 0;
        width: 50%;
        height: 0;
        border: 1px solid transparent;
      }
    }
    .groupbuy_active {
      > p:nth-of-type(1) {
        color: #f21551;
      }
      > p:nth-of-type(2) {
        color: #f21551;
      }
      > p:nth-of-type(3) {
        border: 1px solid #f21551;
      }
    }
  }
}
.cityinfoitem {
  margin-bottom: 10px;
  .header {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    .left {
      width: 45px;
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      > img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .center {
      width: 70%;
      font-size: 12px;
      color: #bbbbbb;
      margin-right: auto;
      display: flex;
      flex-direction: column;
      padding-left: 8px;
      justify-content: center;
      overflow: hidden;
      > p {
        flex: 1;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        overflow: hidden;
        //隐藏部分显示为省略号
        text-overflow: ellipsis;
        //禁止文本自动换行
        white-space: nowrap;
      }
      span {
        // margin-bottom: -5px;
      }
    }
    .phone {
      font-size: 13px;
      display: flex;
      justify-content: center;
      border-radius: 5px;
      width: 60px;
      align-items: center;
      /* height: 35px; */
      background: rgb(255, 51, 102);
      color: #fff;
      padding: 2px 5px;
    }
  }

  .msg {
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
    > ul {
      line-height: 24px;
      .item {
        color: #51bf4d;
        font-size: 14px;
      }
      .detail {
        color: #3a4658;
        font-size: 14px;
      }
      .lidetail {
        overflow: hidden;
        //隐藏部分显示为省略号
        text-overflow: ellipsis;
        //禁止文本自动换行
        white-space: nowrap;
      }
    }
    .showall {
      color: #ff4759;
      background: none;
      font-size: 13px;
    }
    .imgs {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 10px 0 10px;
      margin: 10px 0;
      > div {
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        > img {
          width: 100%;
        }
      }
    }
    .imgs::after {
      content: "";
      width: 100px;
    }
    .imgcontainer {
      width: 100%;
      height: 104px;
      /* background-color: skyblue; */
      display: flex;
      justify-content: space-between;
      > div {
        width: 112px;
        padding: 1px;
        border: 1px dashed #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .imgcontainer:after {
      content: "";
      width: 104px;
    }
    .tags {
      width: 100%;
      height: 20px;
      /* background-color: skyblue; */
      display: flex;
      font-size: 12px;
      margin: 8px 0;
      > div {
        background-color: rgba(246, 246, 246, 1);
        margin-right: 8px;
        border-radius: 15px;
        display: flex;
        /* justify-content: center; */
        justify-content: space-between;
        align-items: center;
        > span {
          margin: 0 5px;
          height: 20px;
        }
        span:nth-child(1) {
          display: inline-block;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          border-radius: 50%;
          background-color: rgba(230, 229, 229, 1);
          margin: 0;
        }
      }
    }
    .liulan {
      width: 100%;
      height: 30px;
      background-color: rgba(248, 248, 248, 1);
      display: flex;
      align-items: center;
      > div:nth-of-type(1) {
        width: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        // margin-left: -15px;
        margin-right: auto;
        padding: 0 5px;
        border-radius: 5px;
      }
      > div img {
        border-radius: 50%;
      }
      > div > img:nth-child(2) {
        transform: translateX(-5px);
      }
      > div > img:nth-child(3) {
        transform: translateX(-10px);
      }
      > div > img:nth-child(4) {
        transform: translateX(-15px);
      }
      > div > img:nth-child(5) {
        transform: translateX(-20px);
      }

      > div:nth-child(3) {
        font-size: 12px;
        color: #948f8f;
        padding-right: 5px;
      }
    }
  }
}
</style>
